import store from '../../../store'
import { throttle } from '../untils/commonUtils';

export default function dragEventHook(event,index) {
    const canvas = store.state.imageDragMoudules.canvas;
    const component = store.state.imageDragMoudules.components[index];
    console.log("componentsList",component);
    const throttleUpdate = function(position){
        console.log("throttleUpdate");
        store.commit('updateComponent', {
            newState: { ...position },
            key: 'position',
        });
        // throttle((position) => {
        //     store.commit('updateComponent', {
        //     newState: { ...position },
        //     key: 'position',
        //     });
        // }, 8);
    };
    //function dragStart(event, component, index) {
        // 将激活组件设置为当前鼠标所在的组件
        store.commit('setActivated', { type: 'component', component: component, index: index });
        // 锁定时禁止拖动
        if (component.isLocked) return;
        // const { path } = event;
        // const target = path.find((el: HTMLElement) => el.className && el.className.indexOf('cp cp__') !== -1);
        //将当前位置信息赋值给currentPAS
        const currentPAS = {
            // x: target.offsetLeft,
            // y: target.offsetTop,
            x: component.position.left,
            y: component.position.top,
            clientX: event.clientX,
            clientY: event.clientY
        };
        console.log("最初的currentPAS:",currentPAS);
        let first = true;
        //鼠标移动事件
        var moving = function(e){
            if (first) {
                store.commit('setMoving', { status: true });
                first = false;
            }
            console.log("组件列表:",currentPAS);
            const {size: { width, height }} = component;
            // 根据鼠标移动距离更新元素的当前位置
            const { x, y, clientX, clientY } = currentPAS;
            
            let newLeft = x + (e.clientX - clientX) / canvas.scale;
            let newTop = y + (e.clientY - clientY) / canvas.scale;
            // 鼠标吸附
            // const gridColWidth = store.state.imageDragMoudules.canvas.size.width / store.state.imageDragMoudules.canvas.grid.col;
            // const gridColHeight = store.state.imageDragMoudules.canvas.size.height / store.state.imageDragMoudules.canvas.grid.row;
            // const surplusX = newLeft % gridColWidth;
            // const surplusY = newTop % gridColHeight;
            // if (surplusX > gridColWidth / 2) {
            //     newLeft = (Math.floor(newLeft / gridColWidth) + 1) * gridColWidth;
            // }
            // else {
            //     newLeft = Math.floor(newLeft / gridColWidth) * gridColWidth;
            // }
            // if (surplusY > gridColHeight / 2) {
            //     newTop = (Math.floor(newTop / gridColHeight) + 1) * gridColHeight;
            // }
            // else {
            //     newTop = Math.floor(newTop / gridColHeight) * gridColHeight;
            // }
            // newLeft = newLeft + 8;
            // newTop = newTop + 8;
            // 判断是否还在可视区域内, 不在则重设为合法数值
            // if (newLeft < 0)
            //     newLeft = 0;
            // if (newLeft + width > canvas.size.width)
            //     newLeft = canvas.size.width - width;
            // if (newTop < 0)
            //     newTop = 0;
            // if (newTop + height > canvas.size.height)
            //     newTop = canvas.size.height - height;
            const position = {
                left: Math.floor(newLeft),
                top: Math.floor(newTop)
            };
            console.log("position",position);
            throttleUpdate(position);
        };
        //鼠标松开事件
        var moveEnd = function(){
            //将移动状态设置为false
            store.commit('setMoving', { status: false });
            first = true;
            document.documentElement.removeEventListener('mousemove', moving);
            document.documentElement.removeEventListener('mouseup', moveEnd);
        };
        //先执行一次移动事件
        document.documentElement.addEventListener('mousemove', moving);
        document.documentElement.addEventListener('mouseup', moveEnd);
    // };
    // return {
    //     dragStart: dragStart
    // };
}






